<template>
    <view>
        <view class="header">
            <!-- <view class="header-search">
                <input type="text">
                <i class="iconfont icon-search"></i>
            </view> -->
            <!-- <view class="header-condition">
                <view :class="conditionActive === 0 ? 'condition-item conditionActive' : 'condition-item'" @click="conditionActive = 0">综合排序</view>
                <view :class="conditionActive === 1 ? 'condition-item conditionActive' : 'condition-item'" @click="conditionActive = 1">销售</view>
                <view :class="conditionActive === 2 ? 'condition-item conditionActive' : 'condition-item'" @click="conditionActive = 2">价格<i class="iconfont icon-select-tb"></i></view>
            </view> -->
        </view>
        <view class="main">
            <view class="classify-item">
                <block v-for="(item, index) in classifyList" :key="index">
                    <view :class="active === item.id ? 'classify-item-name active' : 'classify-item-name'" @click="changeSwiper(item)">
                        <view class="active-mark" v-show="active === item.id ? true : false"></view>
                        <view style="margin-left: 53rpx">{{item.class_name}}</view>
                    </view>
                </block>
            </view>
            <view class="classify-info">
                <swiper :current="active - 1" duration="0" class="swiper">
                    <block v-for="(item, index) in classifyList" :key="index">
                        <swiper-item class="swiper-item" @touchmove.stop>
                            <scroll-view style="height:100%" scroll-y>
                                <view class="content">
                                    <block v-for="(item1, index1) in item.spu" :key="index1">
                                        <view class="content-item" @click="goCommidtyDetail(item.type, item1)">
                                            <view class="item-img">
                                                <img :src="item1.commodity_image_thum" alt="" style="width:100%;height:100%">
                                            </view>
                                            <view class="item-info">
                                                <view class="item-name">{{item1.spu_name}}</view>
                                                <view class="item-post">包邮</view>
                                            </view>
                                            <view class="item-price">￥{{item1.price}}</view>
                                        </view>
                                    </block>
                                </view>
                            </scroll-view>
                        </swiper-item>
                    </block>
                </swiper>
            </view>
        </view>
        <tabBar address="1"></tabBar>
    </view>
</template>

<script>
import { ClassifyModel } from '../../model/classify'
import tabBar from '../../components/tabBar/tabBar'
const classifyModel = new ClassifyModel()
export default {
    data() {
        return {
            active: 1,
            conditionActive: 0,
            classifyList: []
        }
    },
    components: {
        tabBar
    },
    methods: {
        goClassifyDetail() {
            uni.navigateTo({
                url: '/pagesB/classify-detail/classify-detail'
            })
        },
        // 获取分类信息
        _getClassify() {
            classifyModel.getClassify().then((res) => {
                if(res.code == 200) {
                    this.classifyList = res.data
                }
            })
        },
        changeSwiper(item) {
            this.active = item.id
        },
        // 去商品详情页面
        goCommidtyDetail(type, item1) {
            console.log(type)
            if(type == 0) {
                uni.navigateTo({
                    url: '/pagesA/commodity-detail/commodity-detail?id=' + item1.id
                })
            }else if(type == 1) {
                uni.navigateTo({
                    url: '/pagesA/group-commidty-detail/group-commidty-detail?commidtyId=' + item1.id
                })
            }
        }
    },
    onLoad() {
        this._getClassify()
    },
    onShareAppMessage() {
		uni.share({
			provider: 'weixin',
			scene: 'WXSceneSession',
			type: 5,
			title: '农乎',
			imageUrl: 'http://qiniu.quanyubao.cn/logo.png',
			miniProgram: {
				id: 'gh_58835c3bb0aa',
				path: 'pages/index/index',
				type: 0
			}
		})
	},
    onShow() {
        let iconType = getApp().globalData.iconType
        if(iconType != '') {
            this.active = iconType
        }else {
            // this.active = 1
        }
    },
    onHide() {
        getApp().globalData.iconType = ''
    }
}
</script>

<style>
    .header {
        height: 57rpx;
        background: #24C79C;
        padding: 21.5rpx 38rpx;
        display: flex;
        justify-content: left;
    }
    .header-search {
        position: relative;
        width: 159rpx;
        height: 57rpx;
        background:rgba(255,255,255,1);
        border-radius:29px;
    }
    .header-search input {
        height: 100%;
        padding: 0 50rpx 0 20rpx;
    }
    .icon-search {
        position: absolute;
        top: 16rpx;
        right: 20rpx;
        color: #BFBFBF;
        font-size: 30rpx;
    }
    .header-condition {
        display: flex;
        justify-content: space-between;
        margin-left: 38rpx;
    }
    .condition-item {
        width: 160rpx;
        text-align: center;
        color: #F7F7F7;
        font-size: 28rpx;
        font-weight: lighter;
        line-height: 57rpx;
    }
    .icon-select-tb {
        font-size: 25rpx;
        color: #ffffff;
    }
    .conditionActive {
        font-size: 28rpx;
        font-weight: bold;
        color: #ffffff;
    }
    .main {
        display: flex;
        justify-content: space-between;
    }
    .classify-item {
        width: 189rpx;
    }
    .classify-info {
        width: 562rpx;
        height: 100vh;
        background: #ffffff;
    }
    
    .classify-item-name {
        position: relative;
        width: 189rpx;
        height: 104rpx;
        color: #666666;
        font-size: 26rpx;
        line-height: 104rpx;
        display: flex;
        justify-content: left;
    }
    .active {
        color: #333333;
        font-size: 30rpx;
        font-weight: bold;
        background: #ffffff;
    }
    .active-mark {
        position: absolute;
        top: 40rpx;
        left: 33rpx;
        width: 7rpx;
        height: 30rpx;
        background: #24C79C;
        /* margin: auto 0; */
        /* margin-left: 33rpx; */
    }
    .shopping-img {
        width: 490rpx;
        height: 249rpx;
        border: 1rpx solid #ccc;
        margin-left: 24rpx;
    }
    .classify-name {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
        margin-left: 31rpx;
        margin-top: 39rpx;
    }
    .swiper {
        width: 100%;
        height: 100%;
    }
    .swiper-item {
        width: 189rpx;
        height: 100%;
        background: #ffffff;
    }
    .swiper-item-box {
        width: 100%;
        height: 100%;
    }
    .content {
        padding: 0 38rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .content-item {
        width: 215rpx;
        height: 320rpx;
        background: #ffffff;
        margin-top: 30rpx;
    }
    .item-img {
        width: 215rpx;
        height: 230rpx;
    }
    .item-info {
        display: flex;
        justify-content: space-between;
        padding: 0 15rpx;
        margin-top: 16rpx;
    }
    .item-name {
        color: #333333;
        font-size: 24rpx;
        font-weight: 500;
    }
    .item-post {
        width: 66rpx;
        height: 26rpx;
        border: 1rpx solid rgba(36,199,156,1);
        border-radius: 13rpx;
        font-size: 22rpx;
        font-weight: 400;
        color:rgba(36,199,156,1);
        line-height: 25rpx;
        text-align: center;
    }
    .item-price {
        color: #FF1E1E;
        font-size: 24rpx;
        font-weight: 500;
        padding-left: 15rpx;
    }
</style>